<template>
  <div class="address cover">
    <mall-header />
    <address-title :titleName="'配送地址'" />
    <section class="address-board">
      <ul class="address-list">
        <li
          class="address-item"
          v-for="(item, index) in addressListFilter"
          :class="{ active: checkedIndex === index }"
          :key="item.addressId"
          @click="checkedIndex = index"
        >
          <dl>
            <dt>{{ item.userName }}</dt>
            <dd>{{ item.streeName }}</dd>
            <dd>{{ item.tel }}</dd>
          </dl>
          <div
            class="set-default"
            v-if="!item.isDefault"
            @click="setDefault(item.addressId)"
          >
            <a href="javascript:;">
              <span>设为默认</span>
            </a>
          </div>
          <div class="default" v-if="item.isDefault">
            <a href="javascript:;">
              <span>默认地址</span>
            </a>
          </div>
          <div class="address-delete">
            <a href="javascript:;" @click="removeAddress(item.addressId)">删除</a>
          </div>
        </li>
      </ul>
    </section>
    <div class="address-more" @click="seeMoreData">
      <a href="javascript:;">{{ hint }}</a>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { addressItem } from "@/types/index";
import MallHeader from "@/components/Header/Header.vue";
import AddressTitle from "@/components/Title/Title.vue";
import axios from "axios";

@Component({
  name: "MallAddress",
  components: {
    MallHeader,
    AddressTitle,
  },
})
export default class MallAddress extends Vue {
  private addressList: addressItem[] = [];
  private checkedIndex: number = 0;
  private limitNum: number = 3;
  private hint: string = "查看更多";

  getAddress() {
    axios.get("/mock/address.json").then((responce) => {
      const res = responce.data;
      const data = res.data;
      this.addressList = data;
    });
  }

  created() {
    this.getAddress();
  }

  removeAddress(addressId: string) {
    this.addressList.forEach((elem, index) => {
      if (elem.addressId === addressId) {
        this.addressList.splice(index, 1);
      }
    });
  }

  setDefault(addressId: string) {
    this.addressList.map((elem, index) => {
      if (elem.addressId === addressId) {
        elem.isDefault = true;
      } else {
        elem.isDefault = false;
      }
    });
  }

  seeMoreData() {
    if (this.limitNum === 3) {
      this.limitNum = this.addressList.length;
      this.hint = "省略查看";
    } else {
      this.limitNum = 3;
      this.hint = "查看更多";
    }
  }

  get addressListFilter() {
    return this.addressList.slice(0, this.limitNum);
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/mixins.scss";

.address {
  .address-board {
    @include flex-container;
    height: 100%;
    justify-content: left;
    text-align: left;

    .address-item {
      display: inline-block;
      padding: 5px;
      height: 150px;
      width: 360px;
      border: 1px solid #343434;
      background-color: #fff;
      cursor: pointer;
      text-align: left;
      margin-right: 20px;
      margin-top: 20px;
      line-height: 32px;

      .set-default {
        display: none;
        float: left;
        a {
          color: orange;
        }
      }
      .default {
        float: left;
        a {
          color: orange;
        }
      }
      .address-delete {
        margin-right: 1rem;
        float: right;
        a {
          color: red;
        }
      }
    }

    .address-item.active {
      border: 2px solid orange;
      .set-default {
        display: block;
      }
    }
  }

  .address-more {
    font-size: 24px;
    line-height: 32px;
    padding: 5px;
    margin-top: 20px;
  }
}
</style>
